<template>
  <div class="ginger" style="overflow: hidden">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect" style="box-shadow: 0px 0px 10px 1px cornflowerblue;">
      <el-menu-item index="0"><img src="/logoc.png" class="app-loading-logo" alt="Logo" style="height:56px"/></el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="1" @click="openWindow('/screen/software')">专业软件运行</el-menu-item>
      <el-menu-item index="3" @click="openWindow('/screen/IT')">IT基础设施监控</el-menu-item>
      <el-menu-item index="5" @click="dl">系统管理员登录</el-menu-item>
    </el-menu>
    <video src="/admin/GingerVideo02.mp4" playsinline autoplay loop muted style="width:100%;height:500px;object-fit: cover;margin-top: 100px"/>
    <el-divider style="padding: 0px 100px 0px 100px">
      <a href="http://www.victorysoft.com.cn/" target="_blank">
        <span style="letter-spacing: 1px;font-weight: bolder;color: cornflowerblue">中海石油（中国）有限公司北京研究中心</span>
      </a>
    </el-divider>
    <div style="box-shadow: 0px 0px 10px 1px cornflowerblue;margin-top: 70px;height: 10px"></div>
    <div style="position: absolute;top: 85px;left: 35px">
      <span style="font-weight: bolder;font-size: 28px;letter-spacing: 2px;color: #4b5b76">数据中心运行环境实时监测系统</span>
      <div style="width: 100px;height: 100px;display: none" :style="{background: tpBackground}"></div>
    </div>
    <div style="position: absolute;top: 350px;left: 35px;width: 38%;">
      <span style="font-size: 15px;font-weight: bolder;color: #4b5b76;letter-spacing: 2px">
      </span>
    </div>
    <el-dialog title="请登陆"  center custom-class="dialogClass" v-model="dialogVisibleDl" width="500">
      <LoginForm/>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>

import { computed,reactive,ref } from "vue";
import { AppLocalePicker, AppDarkModeToggle } from "/@/components/Application";
import LoginForm from "./LoginForm.vue";
import ForgetPasswordForm from "./ForgetPasswordForm.vue";
import RegisterForm from "./RegisterForm.vue";
import { useGlobSetting } from "/@/hooks/setting";
import { useI18n } from "/@/hooks/web/useI18n";
import { useDesign } from "/@/hooks/web/useDesign";
import { useLocaleStore } from "/@/store/modules/locale";
import { useLoginState, LoginStateEnum } from "./useLogin";
import { Icon } from '/@/components/Icon'
defineProps({
  sessionTimeout: {
    type: Boolean
  }
});
const tpBackground = ref("")
const loginHeight = window.innerHeight
const loginWidth = window.innerWidth
const dialogVisibleDl = ref(false)
const activeIndex = ref('')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const globSetting = useGlobSetting();
const { prefixCls } = useDesign("login");
const { t } = useI18n();
const localeStore = useLocaleStore();
const showLocale = localeStore.getShowPicker;
const title = computed(() => globSetting?.title ?? "");
const { handleBackLogin } = useLoginState();
handleBackLogin();
function dl(){
  dialogVisibleDl.value = true
}
function openWindow(ly){
  console.log(21)
window.open(ly)
}

let h1 = 100
//setInterval(() => {
  tpBackground.value = "rgba(0,0,0,0.4) url('/admin/long/ani-wangluo.png') -15px -12px no-repeat"
//}, 1000)

</script>

<style scoped>
:deep(.el-menu--horizontal>.el-menu-item.is-active){
  border-bottom: 0px solid
}
:deep(.el-menu--horizontal>.el-menu-item){
  border-bottom: 0px solid transparent;
}
:deep(.el-dialog__body){
  padding: 10px 30px 10px 30px;
}
</style>

<style lang="less">
.flex-grow {
  flex-grow: 1;
}


@prefix-cls: ~'@{namespace}-login';
@logo-prefix-cls: ~'@{namespace}-app-logo';
@countdown-prefix-cls: ~'@{namespace}-countdown-input';
@dark-bg: #293146;

html[data-theme='dark'] {
  .@{prefix-cls} {
    background-color: @dark-bg;

    &::before {
      background-image: url(/@/assets/svg/login-bg-dark.svg);
    }

    .ant-input,
    .ant-input-password {
      background-color: #232a3b;
    }

    .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
      border: 1px solid #4a5569;
    }

    &-form {
      background: transparent !important;
    }

    .app-iconify {
      color: #fff;
    }
  }

  input.fix-auto-fill,
  .fix-auto-fill input {
    -webkit-text-fill-color: #c9d1d9 !important;
    box-shadow: inherit !important;
  }
}

.@{prefix-cls} {
  min-height: 100%;
  overflow: hidden;
  @media (max-width: @screen-xl) {
    background-color: #293146;

    .@{prefix-cls}-form {
      background-color: #fff;
    }
  }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: -48%;
    background-image: url(/@/assets/svg/login-bg.svg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    content: '';
    @media (max-width: @screen-xl) {
      display: none;
    }
  }

  .@{logo-prefix-cls} {
    position: absolute;
    top: 12px;
    height: 30px;

    &__title {
      font-size: 16px;
      color: #fff;
    }

    img {
      width: 32px;
    }
  }

  .container {
    .@{logo-prefix-cls} {
      display: flex;
      width: 60%;
      height: 80px;

      /*登录页标题样式*/

      &__title {
        font-size: 28px;
        color: #fff;
        letter-spacing: 3px;
      }

      img {
        width: 48px;
      }
    }
  }

  &-sign-in-way {
    .anticon {
      font-size: 22px;
      color: #888;
      cursor: pointer;

      &:hover {
        color: @primary-color;
      }
    }
  }

  input:not([type='checkbox']) {
    min-width: 360px;

    @media (max-width: @screen-xl) {
      min-width: 320px;
    }

    @media (max-width: @screen-lg) {
      min-width: 260px;
    }

    @media (max-width: @screen-md) {
      min-width: 240px;
    }

    @media (max-width: @screen-sm) {
      min-width: 160px;
    }
  }

  .@{countdown-prefix-cls} input {
    min-width: unset;
  }

  .ant-divider-inner-text {
    font-size: 12px;
    color: @text-color-secondary;
  }
}

.dialogClass{
  border-radius: 20px;
  padding: 0px 30px 0px 30px
}
</style>
